<template>
	<div class="container">
		<!-- <div
      id="sortPrintNote"
      :style="{
        width: print_seting.width + 'mm',
        height: print_seting.height + 'mm',
        position: 'absolute',
        overflow: 'hidden',
      }"
    >
      <span
        v-for="(item, index) in main_setting.goodslist"
        :key="index"
        style="
          position: absolute;
          overflow: hidden;
          z-index: 1;
          letter-spacing: 1px;
        "
        :style="{
          left: item.left + 'px',
          top: item.top + 'px',
          fontSize: main_setting.fontset.fontSize + 'px',
          fontWeight: main_setting.fontset.bold ? 'bold' : 'none',
          textDecoration: main_setting.fontset.underline ? 'underline' : 'none',
          fontStyle: main_setting.fontset.italic ? 'italic' : 'none',
        }"
        ><template
          >{{ item.label }}:{{ order[`${item.index - 1}`] }}</template
        ></span
      >
      <div
        v-for="item in qrcode_data.qrcodelist"
        id="qrcode"
        :key="item.label"
        style="position: absolute; z-index: 10"
        :style="{
          left: item.left + 'px',
          top: item.top + 'px',
        }"
      >
        <img :src="qrcode_img" alt="" style="diplay: block; width: 100%" />
      </div>
    </div> -->
	</div>
</template>


<script>
	import { getLodop } from "@/utils/LodopFuncs";
	import { sort_note_print } from "@/api/order/orderList";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import { get_print_mark } from "@/api/global/globalPrint";
	import QRCode from "qrcodejs2";
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				print_seting: {},
				main_setting: {
					goodslist: [],
					fontset: {
						fontSize: "14",
						bold: false,
						underline: "false",
						italic: false,
						textAlign: "center",
					},
				},
				order: [],
				print_set_info: [],
				//二维码
				qrcode_data: {
					qrcodelist: [],
					selectType: [],
				},
				qrcode_img: "",
				goods_sku_code: "",
				//  辅助线
				sublineData: {
					sublinelist: [],
					selectType: [],
				},
			};
		},
		computed: {
			...mapGetters(["avatar"]),
			print_setting() {
				return `print_setting_list_${this.avatar.company_id}`;
			},
		},
		mounted() {
			this.monitoringPrintNote(); // 注册监听事件
		},
		updated() {},
		methods: {
			monitoringPrintNote() {
				// 监听事件
				this.$on("sortPrintNote", (res) => {
					this.get_print_info();
					this.getTemplateData(res);
				});
			},
			// 获取打印机配置信息
			get_print_info() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name
				);
				let print_setting_list = localStorage.getItem(this.print_setting);
				if (print_setting_list) {
					try {
						this.print_set_info = JSON.parse(print_setting_list);
					} catch (error) {
						console.log(error);
					}
				}
				// get_print_mark(data).then((res) => {
				// 	if (res.errcode == 0) {
				// 		this.print_set_info = res.data.list;
				// 	}
				// });
			},
			// 加载数据
			getTemplateData(res) {
				let id = res.id;
				let num = "";
				if (res.num) {
					num = res.num;
				}
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ id: id }
				);
				sort_note_print(data).then((res) => {
					if (res.errcode == 0) {
						let data = res.list;
						this.main_setting = JSON.parse(
							data.mubang.main_settings
						).goodsSetData;

						this.qrcode_data = JSON.parse(data.mubang.main_settings).qrcodeData;
						this.sublineData = JSON.parse(data.mubang.main_settings).sublineData;
						this.print_seting = JSON.parse(data.mubang.print_settings);
						this.print_set_info.map((item) => {
							if (item.type == res.list.mubang.tem_id) {
								this.print_seting["print_mark"] = item.print_index;
							}
						});
						this.order = data.order;
						if (num) {
							this.order[5] = num;
						}
						this.qrcode_img = res.list.img;
						this.goods_sku_code = res.list.goods_sku_code;
						this.print(this.print_seting);
					}
				});
			},
			// 订单打印事件
			print(params) {
				let LODOP = getLodop();
				if (!LODOP) {
					return;
				}
				if (params.print_mark != -1) {
					LODOP.SET_PRINTER_INDEX(params.print_mark);
				}
				LODOP.SET_PRINT_PAGESIZE(
					1,
					params.width + "mm",
					params.height + "mm",
					""
				);
				// LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width"); //设置页面缩放
				// LODOP.ADD_PRINT_HTML(
				//   params.topMargin + "px",
				//   params.leftMargin + "px",
				//   "100%",
				//   "100%",
				//   document.getElementById("sortPrintNote").innerHTML
				// );
				this.AddPrintContent();
				// LODOP.PRINT_DESIGN();
				if (params.isShow) {
					LODOP.PREVIEW();
				} else {
					LODOP.PRINT();
				}
			},

			AddPrintContent() {
				let mmTopx = "";
				if (localStorage.getItem("getOneMmsPx")) {
					mmTopx = localStorage.getItem("getOneMmsPx");
				} else {
					mmTopx = this.getOneMmsPx();
				}

				let { fontset, goodslist } = JSON.parse(
					JSON.stringify(this.main_setting)
				);
				let sublinelist = [];
				let subline_selectType = [];
				if (this.sublineData) {
					sublinelist = JSON.parse(JSON.stringify(this.sublineData)).sublinelist;
					subline_selectType = JSON.parse(
						JSON.stringify(this.sublineData)
					).selectType;
				}

				let order = JSON.parse(JSON.stringify(this.order));
				let print_seting = JSON.parse(JSON.stringify(this.print_seting));
				let qrcode_data = JSON.parse(JSON.stringify(this.qrcode_data));
				let { bold, fontSize, italic, textAlign, underline } = fontset;
				let { qrcodelist, selectType } = qrcode_data;
				let align = {
					center: 2,
					left: 1,
					right: 3,
				};

				let lineType = {
					1: 0,
					2: 1,
					3: 2,
				};
				sublinelist.map((e) => {
					subline_selectType.map((p) => {
						if (e.index == p) {
							e.end_left = e.left;
							e.end_top = e.top;
							e.top = e.top + "px";
							e.left = e.left + "px";

							if (e.direction == 1) {
								// 横线
								LODOP.ADD_PRINT_LINE(
									e.top,
									e.left,
									e.top,
									e.end_left + e.length * mmTopx,
									lineType[e.line_type],
									e.size
								);
							} else if (e.direction == 2) {
								// 竖线
								LODOP.ADD_PRINT_LINE(
									e.top,
									e.left,
									e.end_top + e.length * mmTopx,
									e.left,
									lineType[e.line_type],
									e.size
								);
							}
						}
					});
				});

				LODOP.SET_PRINT_STYLE("FONTSIZE", fontSize);
				LODOP.SET_PRINT_STYLE("Bold", bold ? 1 : 0);
				LODOP.SET_PRINT_STYLE("Italic", italic ? 1 : 0);
				LODOP.SET_PRINT_STYLE("Underline", underline ? 1 : 0);
				// LODOP.SET_PRINT_STYLE("Alignment", align[textAlign]);

				let width = `${print_seting.width}mm`;
				let height = `${print_seting.height}mm`;
				goodslist.map((e) => {
					e.text = e.label + ":" + order[e.index - 1];
					e.left = e.left + "px";
					e.top = e.top + "px";
					LODOP.ADD_PRINT_TEXT(e.top, e.left, width, height, e.text);
				});
				qrcodelist.map((e) => {
					if (e.index == 1) {
						// 二维码
						e.left = e.left - 8 + "px";
						e.top = e.top - 8 + "px";
						e.width = e.width + "mm";
						e.height = e.height + "mm";
						LODOP.ADD_PRINT_IMAGE(
							e.top,
							e.left,
							20 + "mm",
							20 + "mm",
							` <img src="${this.qrcode_img}" alt="" style="diplay: block; width: 100%" />`
						);
					}
					if (e.index == 2) {
						// 条形码;
						e.left = e.left + "px";
						e.top = e.top + "px";
						e.width = 35 + "mm";
						e.height = 10 + "mm";
						if (this.goods_sku_code) {
							LODOP.ADD_PRINT_BARCODE(
								e.top,
								e.left,
								e.width,
								e.height,
								"128Auto",
								this.goods_sku_code
							);
						}
					}
				});
			},
			getOneMmsPx() {
				let div = document.createElement("div");
				div.id = "mm";
				div.style.width = "1mm";
				document.querySelector("body").appendChild(div);
				let mm1 = document.getElementById("mm").getBoundingClientRect();
				localStorage.setItem("getOneMmsPx", mm1.width);
				return mm1.width;
			},
		},
	};
</script>

<style lang='scss' scoped>
</style>
